<template lang='pug'>
  div.login
    div.logo Small Special Sale
    div.title( v-if="pwding")  (*/ω＼*)
    div.title( v-else) |･ω･｀)
    div.box
      el-form(ref="form" :model="form" label-width="40px")
        el-form-item( label="账号")
          el-input(v-model="form.username" placeholder="用户名")
        el-form-item( label="密码" )
          el-input(v-model="form.password" :type="pwd" placeholder="密码" @focus="focusBlur(true)" @blur="focusBlur(false)")
        el-form-item.flex
          el-button(type="primary" :loading="logLoad" round @click.native.prevent="handleLogin") 登陆
          el-button(type="warning" round @click="register") 注册
    

</template>

<script>
import { Msg } from "@/utils/index";
import { mixin } from "../mixin/index";
import { login,getAuth } from "@/api/login";
import { setToken } from '@/router/cookie'

export default {
  mixins: [mixin],
  name: "Login",
  data() {
    return {
      logLoad: false,
      form: {
        username: null,
        password: null
      },
      pwd:'password',
      pwding:false
    };
  },
  mounted() {

  },
  methods: {
    focusBlur(e){
      this.pwding = e;
    },

    //注册按钮
    register(){
      this.Notice("注册失败", "暂时未开放注册功能哦！", "warning");
    },
    //服务端登陆
    async serverLogin(){
      const res = await login(this.form);
      if( !res) return
      setToken(res.data.token)
      this.Notice("欢迎光临！", '尊贵的超级VIP', "success");
      this.$router.push('/home')
    },
    handleLogin() {
      if (!this.form.username) {
        this.Notice("用户名必须填写", "", "error");
      } else if (!this.form.password) {
        this.Notice("密码不能为空", "", "error");
      } else {
        this.serverLogin()
      }
    },
  }
};
</script>
<style lang="less" scoped>
.btn {
  display: flex;
  align-content: center;
  .log {
    padding: 2px 30px;
    border: 1px solid #ccc;
  }
}
.logo{
  color: #fff;
}
.title {
  color: #fff;
  padding: 40px 40px;
  transform: translate(100px,160px);
  font-weight: bold;
  font-size: 20px;
}
.flex {
  display: flex;
  flex-direction: row-reverse;
}
.login {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: url("../images/bg3.jpg") no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  .box {
    transform: translate(100px, 140px);
    width: 400px;
    padding: 20px 20px 0;
    background-color: #fff;
    border-radius: 5px;
  }

}
</style>

